<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<svg width="500" height="500">
			<path id="p1" d=""  style="stroke: black;fill: none;"></path>
			<!--<line x1="200" y1="250" x2="400" y2="250" style="stroke: black;"></line>-->
		</svg>
	</body>
	<script>
		let p1 =document.getElementById("p1");
		let sa = 30;
		let ea = 60;
		
		let r = 200;
		let cx = 250;
		let cy =250;
		
		let x1 = cx+Math.sin(sa*Math.PI/180)*r;
		let y1 = cy-Math.cos(sa*Math.PI/180)*r;
		
		let x2 = cx + Math.sin(ea*Math.PI/180)*r;
		let y2 = cy-Math.cos(ea*Math.PI/180)*r;
		
		let html ="";
		//step Line
		html+=`M 250 250 L ${x1} ${y1} `;
		//step Line
		html+=`A ${r} ${r} 0 ${ea-sa>180?1:0} 1 ${x2} ${y2} `
		//step Z
		html+="Z"
		console.log(html)
		p1.setAttribute("d",`${html}`)
	</script>
</html>
